<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
            @node-click="handleTreeNodeClick"
    >
    </el-tree>
</div>
<script type="module" >

    var Main = {
        data() {
            return {
                data: [{
                    id: 1,
                    label: '一级 1',
                    children: [{
                        id: 4,
                        label: '二级 1-1',
                        children: [{
                            id: 9,
                            label: '三级 1-1-1',
                            children: [{
                                id: 11,
                                label: '四级 1-1-1'
                            },

                                {
                                    id: 12,
                                    label: '四级 1-1-1'
                                }
                            ]
                        }, {
                            id: 10,
                            label: '三级 1-1-2'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '一级 2',
                    children: [{
                        id: 5,
                        label: '二级 2-1'
                    }, {
                        id: 6,
                        label: '二级 2-2'
                    }]
                }, {
                    id: 3,
                    label: '一级 3',
                    children: [{
                        id: 7,
                        label: '二级 3-1'
                    }, {
                        id: 8,
                        label: '二级 3-2'
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            };
        },
        methods:{
            handleTreeNodeClick(data, node, elem){
                //获取当前时间
                // 获取当前日期
                const currentDate = new Date();
                // 获取年、月、日
                const year = currentDate.getFullYear();
                const month = String(currentDate.getMonth() + 1).padStart(2, '0');
                const day = String(currentDate.getDate()).padStart(2, '0');
                // 格式化为 "yyyy-MM-dd" 格式
                const formattedDate = `${year}-${month}-${day}`;
                console.log(formattedDate); // 输出类似 "2023-08-31" 的格式化日期







                console.log(node);
                let parentArray=[];
                this.getParentIdArray(node,parentArray)
                console.log(parentArray);
                let treePath="";
                parentArray.forEach(function(item,index,arr){
                    treePath=treePath+item+"."
                    console.log(item);
                })
                treePath=treePath+data.id;
                console.log(treePath)
            },
            getParentIdArray(node,parentArray){
                if (node.parent.level===0){
                    return 0;
                }
                //从头部插入
                parentArray.unshift(node.parent.data.id)
                this.getParentIdArray(node.parent,parentArray);
            }
        }
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>